<template>
    <div>
        <div id="chart_b" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
export default {
    name: "Board",
    data() {
        return {
            chart_b: "", //图表
            option: {
                tooltip: {
                    trigger: "item",
                },
                color: ['#ff5937','#008be7','#8d78f5','#00d3e5','#ffb141'],
                radius: ['50%',"120%"],
                legend: {
                    top: "5%",
                    left: "center",
                    textStyle: {
                        //图例文字的样式
                        color: "rgba(255,255,255,.6)",
                        // fontSize: 16,
                    },
                },
                series: [
                    {
                        name: "类型",
                        type: "pie",
                        radius: ["30%", "70%"],
                        avoidLabelOverlap: false,
                        left: "center",
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: "#fff",
                            borderWidth: 2,
                        },
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: "40",
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 735, name: "异常鸽" },
                            { value: 580, name: "残次品" },
                            { value: 1000, name: "鸽蛋" },
                            { value: 580, name: "鸽粪" },
                            { value: 1048, name: "肉鸽" },
                        ],
                    },
                ],
            },
        };
    },
    watch: {
        allProductionTypeOfMoun: {
            //月数据
            deep: true,
            handler(newValue, oldValue) {
                let that = this;
                let k = 0; //数组下标
                //    console.log('产出数据更新');
                delete newValue.month; //去除数据里的mounth

                for (let i in newValue) {
                    that.option.series[0].data[k].value = newValue[i];
                    k++;
                }
                //    console.log(this.option.series[0].data);
                that.chart_b.setOption(that.option);
            },
        },
        allProductionTypeOfYear: {
            deep: true,
            handler(newValue, oldValue) {
                // console.log("年数据发生改变");
                // console.log(newValue);
                let that = this;
                //图表数据处理
                for (let i in newValue) {
                    if (i === "异常鸽") {
                        that.option.series[0].data[0].value = newValue[i];
                        continue;
                    } else if (i === "残次品") {
                        that.option.series[0].data[1].value = newValue[i];
                        continue;
                    } else if (i === "鸽蛋") {
                        that.option.series[0].data[2].value = newValue[i];
                        continue;
                    } else if (i === "鸽粪") {
                        that.option.series[0].data[3].value = newValue[i];
                        continue;
                    } else {
                        that.option.series[0].data[4].value = newValue[i];
                    }
                }
                // console.log("新的数据");
                // console.log(that.option.series[0].data);
                that.chart_b.setOption(that.option);
            },
        },
    },
    mounted() {
        this.makechart();
    },
    props: {
        allProductionTypeOfMoun: {
            //月数量
            type: Object,
            default: function () {
                return {};
            },
        },
        allProductionTypeOfYear: {
            //年数量
            type: Object,
            default: function () {
                return {};
            },
        },
    },
    methods: {
        makechart() {
            let that = this;

            this.$nextTick(() => {
                that.chart_b = that.$echarts.init(
                    document.getElementById("chart_b")
                );
                that.chart_b.setOption(that.option);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>